<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前的n值是：{{n}}</h2>
        <button>点我n+1</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false

        new Vue({
            el: '#root',
            data: {
                n: 0
            },
            methods: {
                changeN() {
                    this.n++
                }
            },
            // Vue 完成模板解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
            mounted() {
                console.log('mounted')
                // this.n++
                // this.n++
                // this.n++
                // this.n++
            }
        })
    </script>
</body>
</html>
